<!DOCTYPE html>
<html lang="en">
<head>
    <!--实物商品-->
    <title>实物商品</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/layui-2.4.2/src/css/layui.css">
    <script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/layui-2.4.2/src/layui.js"></script>
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript" src="/common.js"></script>

</head>
<body>
    <div>
        <div class="layui-row">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline" style="float:left;">
                        <button class="layui-btn" id="createProduct">创建商品</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <table id="product_view" lay-filter="product_view_filter">

            </table>
        </div>
        <!--<div class="layui-row">-->
            <!--<div class="layui-col-md12">-->
                <!--<table class="layui-hide" id="productView" lay-filter="productView"></table>-->

                <!--<script type="text/html" id="barProduct">-->
                    <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
                    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
                <!--</script>-->
                <!--<table class="layui-table layui-table_margin" lay-skin="row" id="product_view" lay-filter="product_view">-->

                <!--</table>-->
                <!--<script type="text/html" id="barDemo">-->
                    <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
                    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
                <!--</script>-->
            <!--</div>-->

        <!--</div>-->



    </div>
<!--商品编辑浮层-->
<form class="layui-form" id="edit_product" action="" style="display:none;margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="productName" lay-verify="productName" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
            <input type="hidden" name="id" id="id" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品类型:</label>
        <div class="layui-input-block" style="margin-right:20px;">
            <select name="type" class="type_select" lay-filter="type_select">
                <option value="1">普通商品</option>
                <option value="2">蜜糖商品</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="price" placeholder="请输入商品价格" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="btnPicture" style="margin-left:40px;padding-left: 5px;padding-right: 5px;">商品图片上传</button>
            <br/>
            <div class="layui-row previewList" style="margin-left: 40px;margin-left: 40px;">

            </div>
            <input type="hidden" name="imagePaths" class="imagePathList"/>
            <input type="hidden" name="imagePathType" value="1"/>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="btnPictureInfo" style="margin-left:40px;padding-left: 5px;padding-right: 5px;">商品详情上传</button>
            <br/>
            <div class="layui-row pictureInfo" style="margin-left: 40px;margin-left: 40px;">

            </div>
            <input type="hidden" name="pictureInfo" class="pictureInfo"/>
            <input type="hidden" name="pictureInfoType" value="2"/>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="btnBannerInfo" style="margin-left:40px;padding-left: 5px;padding-right: 5px;">商品轮播图上传</button>
            <br/>
            <div class="layui-row bannerInfo" style="margin-left: 40px;margin-left: 40px;">

            </div>
            <input type="hidden" name="bannerPaths" class="bannerInfoList"/>
            <input type="hidden" name="bannerInfoType" value="5"/>
        </div>
    </div>
   <!-- <div class="layui-form-item" >
        <label class="layui-form-label">商品详情</label>
        <div id="editor" class="layui-input-block" style="border:1px;padding-right:10px;">
        </div>
        <textarea name="description" id="description" hidden="hidden"></textarea>
        &lt;!&ndash;<div class="layui-input-block" style="margin-right:20px;">&ndash;&gt;
            &lt;!&ndash;&ndash;&gt;
        &lt;!&ndash;</div>&ndash;&gt;
    </div>-->
    <br/>
</form>
    <!--表格toobar模板-->
    <script type="text/html" id="toolOper">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        {{#  if(d.status == 0){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">上架</a>
        {{#  } }}
        {{#  if(d.status == 1){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">下架</a>
        {{#  } }}
    </script>
    <script type="text/javascript">
        // var E = window.wangEditor;
        // var editor = new E('#editor');
        // var $text1 = $('#description');
        // // 配置服务器端地址
        // editor.customConfig.uploadImgServer = '/upload/image?typeId=1';
        // editor.customConfig.uploadFileName = 'file';
        // // editor.customConfig.uploadImgHeaders = {'Content-Type':'multipart/form-data'};
        // editor.customConfig.onchange = function (html) {
        //     // 监控变化，同步更新到 textarea
        //     $text1.val(html)
        // };
        // editor.customConfig.uploadImgHooks={
        //     customInsert:function (insertImg, result, editor) {
        //         insertImg(result.data);
        //         console.log();
        //     }
        // }
        // editor.create();
        // // 初始化 textarea 的值
        // $text1.val(editor.txt.html());
    </script>
    <script>
        var E = window.wangEditor;
        var editor = new E('#editor');
        var $text1 = $('#description');
        // 配置服务器端地址
        editor.customConfig.uploadImgServer = '/upload/image?typeId=1';
        editor.customConfig.uploadFileName = 'file';
        // editor.customConfig.uploadImgHeaders = {'Content-Type':'multipart/form-data'};
        editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $text1.val(html)
        };
        editor.customConfig.uploadImgHooks={
            customInsert:function (insertImg, result, editor) {
                insertImg(result.data);
                console.log();
            }
        }
        editor.create();
        // 初始化 textarea 的值
        $text1.val(editor.txt.html());
    layui.use(['element','table','form','upload','laytpl'], function(){
        var upload=layui.upload;
        var table=layui.table;
        var form=layui.form;
        //商品列表
        table.render({
            elem:'#product_view',
            url:'/product/list',
            page:true,
            limit:10,
            limits:[10,20,50,100],
            cols:[
                [
                    {field:'id',title:'商品编号', width: 150},
                    {field:'productName',title:'商品名称', width: 500},
                    {field:'price',title:'商品价格', width: 100},
                    {field:'honeySugar',title:'蜜糖价格', width: 100},
                    {field:'diligenceDegree',title:'赠送勤劳度', width: 100},
                    {field:'honey',title:'赠送蜂蜜', width: 100},
                    {field:'type',title:'商品类型', width: 100,templet:function(d){
                        if(d.type===1)return '实物商品';
                        if(d.type===2)return '蜜糖商品';
                        }},
                    {field:'status',title:'状态', width: 100,templet:function(d){
                            if(d.status===0)return '停售';
                            if(d.status===1)return '在售';
                        }},
                    {field:'right', width: 200,toolbar:'#toolOper'}
                ]
            ],
            // request:{page:'page',limit:'limit'},
            response:{
                status:'errorCode',
                countName:'total',
                dataName:'data'
            }
        });

        table.on('tool(product_view_filter)',function(obj){
            var data=obj.data;
            var layEvent=obj.event;
            var status;
            if(layEvent==='check'){
                if(data.status==1){
                    status=0;
                }else{
                    status=1;
                }
                $.ajax({
                    type:'get',
                    data:{id:data.id,status:status},
                    url:'/product/updateStatus',
                    cache:false,
                    success:function(data){
                        if(data.success==true){
                            $(".layui-laypage-btn").click();
                        }
                    }
                })
            }
            if(layEvent==='edit'){
                if(data.status==1){
                    alert('再售商品不允许修改');
                    return;
                }
                $.ajax({
                    type:'post',
                    data:{id:data.id},
                    url:'/product/get',
                    cache:false,
                    dataType:'json',
                    success:function(res){
                        $("#edit_product").find('input[name="productName"]').val(res.data.productName);
                        $("#edit_product").find('input[name="price"]').val(res.data.price);
                        $("#edit_product").find('input[name="id"]').val(res.data.id);
                        $("#edit_product").find('input[name="diligenceDegree"]').val(res.data.diligenceDegree);
                        $("#edit_product").find('input[name="honey"]').val(res.data.honey);
                        $("#edit_product").find('input[name="honeySugar"]').val(res.data.honeySugar);
                        $("#edit_product").find('input[name="description"]').val(res.data.description);
                        // $("#description").val(res.data.description);
                        $(".imagePathList").val('');
                        editor.txt.clear();
                        editor.txt.append(res.data.description);
                        for(var i=0;i<res.data.paths.length;i++){
                            var img='<div style="width:80px;float:left;display:inline-block;"><img class="layui-col-md1 src_path" style="width:80px;height:80px;" src="'+res.data.paths[i].path+'"/>' +
                                '<p><a href="javascript:" class="delImg">删除</a></p></div>';
                            $(".previewList").append(img);
                        }
                    }
                });
                // $("#status").attr(data.)
                editProductFunc("编辑商品")
            }
        });

        var imagePathList=new Array();
        var bannerInfoList=new Array();
        $(document).on('click', '.delImg', function () {
            currentItem = $(this).parent().parent().remove();
        });
        $('#createProduct').on('click',function(){
            editProductFunc("创建商品");
        });
        var editProductFunc=function (title) {
            layer.open({
                type:1,
                title:title,
                area:['880px','600px'],
                content:$("#edit_product"),
                btn:['保存','取消'],
                btnALign:'c',
                yes:function(index,layero){
                    var pathList;
                    var pictureInfoPath;
                    var bannerInfoList;
                    $.each($(".src_path"),function (index,item) {
                            pathList=$(item).attr('src');
                    });
                    $.each($(".src_path_info"),function (index,item) {
                        pictureInfoPath=$(item).attr('src');
                    });

                    $.each($(".src_banner_path_info"),function (index,item) {
                        if(index>0){
                            bannerInfoList = bannerInfoList+';'+$(item).attr('src');
                        }else{
                            bannerInfoList=$(item).attr('src');
                        }
                    });
                    var name=$("#edit_product").find('input[name="productName"]').val();
                    if(name==undefined||name==''){
                        alert('商品名称不允许为空');
                        return;
                    }
                // ||name.length>30 ，且长度不能大于30
                    if($('.type_select').val()==1){
                        if(!checkDecimal2($("#edit_product").find('input[name="price"]').val())){
                            alert('商品价格小数点不超过两位的正数');
                            return;
                        }
                    }

                    // if(!checkDecimal2($("#edit_product").find('input[name="diligenceDegree"]').val())){
                    //     alert('勤劳度数小数点不超过两位的正数');
                    //     return;
                    // }
                    //
                    // if(!checkDecimal2($("#edit_product").find('input[name="honey"]').val())){
                    //     alert('蜂蜜数小数点不超过两位的正数');
                    //     return;
                    // }


                    if(pathList==undefined||pathList==''){
                        alert('请上传商品图片');
                        return;
                    }

                    $('.pictureInfo').attr('value',pictureInfoPath);

                    $('.imagePathList').attr('value',pathList);

                    $(".bannerInfoList").attr('value',bannerInfoList);
                    // alert($('#edit_product').serialize());
                    $.ajax({
                        type:'post',
                        data:$('#edit_product').serialize(),
                        url:'/product/save',
                        cache:false,
                        dataType:'json',
                        success:function(data){
                            layer.closeAll();
                            $(".layui-laypage-btn").click()
                        }
                    });
                },
                end:function(){
                    $("#edit_product").find('input[name="productName"]').val(res.data.productName);
                    $("#edit_product").find('input[name="price"]').val(res.data.price);
                    $("#edit_product").find('input[name="id"]').val(res.data.id);
                    $("#edit_product").find('input[name="diligenceDegree"]').val(res.data.diligenceDegree);
                    $("#edit_product").find('input[name="honey"]').val(res.data.honey);
                    $("#edit_product").find('input[name="honeySugar"]').val(res.data.honeySugar);
                    $("#edit_product").find('input[name="description"]').val(res.data.description);
                    // $("#description").val(res.data.description);
                    $(".imagePathList").val('');
                    $(".previewList").html('');
                    $(".bannerInfoList").val('');
                    editor.txt.clear();
                    layer.closeAll();
                }
            });

        }

        //图片上传
        upload.render({
            elem: '#btnPicture'
            ,url: '/upload/image',
            data:{typeId:1}
            ,done: function(res){
                //上传完毕
                if(res.success==true){
                    var img='<div style="width:80px;float:left;display:inline-block;"><img class="layui-col-md1 src_path" style="width:80px;height:80px;" src="'+res.data+'"/>' +
                        '<p><a href="javascript:" class="delImg">删除</a></p></div>';
                    $(".previewList").append(img);
                    // imagePathList.push(res.data);
                }
            }
        });
        //商品详情上传
        upload.render({
            elem: '#btnPictureInfo'
            ,url: '/upload/image',
            data:{typeId:1}
            ,done: function(res){
                //上传完毕
                if(res.success==true){
                    var img='<div style="width:80px;float:left;display:inline-block;"><img class="layui-col-md1 src_path_info" style="width:80px;height:80px;" src="'+res.data+'"/>' +
                        '<p><a href="javascript:" class="delImg">删除</a></p></div>';
                    $(".pictureInfo").append(img);
                    // imagePathList.push(res.data);
                }
            }
        });

        //商品banner详情上传
        upload.render({
            elem: '#btnBannerInfo'
            ,url: '/upload/image',
            data:{typeId:5}
            ,done: function(res){
                //上传完毕
                if(res.success==true){
                    var img='<div style="width:80px;float:left;display:inline-block;"><img class="layui-col-md1 src_banner_path_info" style="width:80px;height:80px;" src="'+res.data+'"/>' +
                        '<p><a href="javascript:" class="delImg">删除</a></p></div>';
                    $(".bannerInfo").append(img);
                    bannerInfoList.push(res.data+";");
                }
            }
        });

        form.on('select(type_select)',function(data){
            var type=$('.type_select').val();
            if(type==2){
                $("#edit_product").find('input[name="price"]').parent().parent().css('display','none');
                $("#edit_product").find('input[name="honeySugar"]').parent().parent().css('display','block');
            }else{
                $("#edit_product").find('input[name="price"]').parent().parent().css('display','block');
                $("#edit_product").find('input[name="honeySugar"]').parent().parent().css('display','none');
            }
        });
    });
</script>

</body>
</html>